<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、是什么</h2>
  <div>回流_(dom位置大小)：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置</div>
  <br>
  <div>重绘_(样式)：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制</div>
  <br>
  <div>浏览器解析渲染机制</div>
  <ul>
    <li>解析HTML，生成DOM树，解析CSS，生成CSSOM树</li>
    <li>将DOM树和CSSOM树结合，生成渲染树(Render Tree)</li>
    <li>Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）</li>
    <li>Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素</li>
    <li>Display:将像素发送给GPU，展示在页面上</li>
  </ul>
  <br>
  <div>当我们对 DOM 的修改引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来</div>
  <br>
  <div>当我们对 DOM的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘</div>
  <h2>三、如何减少</h2>
  <ul>
    <li>避免设置多项内联样式</li>
    <li>如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)</li>
    <li>避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算</li>
    <li>对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响</li>
    <li>使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘</li>
    <li>避免使用 CSS 的 JavaScript 表达式</li>
    <li>使用类名去合并样式</li>
    <li>我们还可以通过通过设置元素属性display: none，将其从页面上去掉，然后再进行后续操作，这些后续操作也不会触发回流与重绘，这个过程称为离线操作</li>
  </ul>
</body>
</html>